<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Lesson12 - React第十二课之React中文官网头部导航栏实例</title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }

      .nav {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: #20232a;
        position: fixed;
        top: 0;
      }
      .logo {
        margin-left: 80px;
        color: #ffffff;
      }
      .logo .logo-img {
        width: 20px;
      }
      .logo .logo-text {
        font-size: 20px;
        color: #61dafb;
        font-weight: bolder;
        margin-left: 10px;
      }
      .menu {
        position: absolute;
        top: 0;
        left: 240px;
      }
      .menu a {
        text-decoration: none;
        color: #ffffff;
        display: inline-block;
        font-size: 18px;
        padding: 0 20px;
      }
      .menu a:visited {
        color: #ffffff;
        background-color: #20232a;
      }
      .menu a:hover {
        color: #61dafb;
      }
      .menu a:active {
        color: #ffffff;
        background-color: #373940;
      }
      .content p {
        margin: 80px;
        text-indent: 2em;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      const appDom = document.getElementById('app');

      function NavBarLogo(props) {
        return (
          <div className={'logo'}>
            <img className={'logo-img'} src={props.imgUrl} />
            <span className={'logo-text'}>React</span>
          </div>
        )
      }
     
      function NavBarMenu(props) {
        return (
          <div className={'menu'}>
            <a href='#'>文档</a>
            <a href='#'>教程</a>
            <a href='#'>社区</a>
            <a href='#'>博客</a>
          </div>
        )
      }

      function Content(props) {
        return (
          <div>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
            <p>{ props.content }</p>
          </div>
        )
      }
      function NavBar(props) {
        const imgUrl = '';
        const content = '在我们的理念中，React 最初的目的是使用 JavaScript 创建大型的，快速响应的网络应用。它在我们的 Facebook 和 Instagram 中已经实践的非常好了。'
          + 'React的众多优点之一是它让你在编写代码的时候同时也在思考你的应用。在这篇文档中，我们会带你使用 React 一起创建一个可搜索的产品数据表格，并向你展示我们的思考过程。';
        return (
          <div>
            <div className={'nav'}>
              <NavBarLogo imgUrl={imgUrl} />
              <NavBarMenu />
            </div>
            <div className={'content'} >
              <Content content={content} />
            </div>
          </div>
        )
      }
      ReactDOM.render(<NavBar />, appDom);
    </script>
  </body>
</html>